<template>
	<view class="detail-book">
		<view class="top">
			<view class="t-block">
				<image class="cover" :src="dataObj.image_url"></image>
				<view class="title ellipsis-2">{{dataObj.name}}</view>
				<view class="author ellipsis-1">{{dataObj.brief}}</view>
			</view>
		</view>
		<!-- 书籍概述 -->
		<view class="summary">
			<view class="block">
				<view class="header">书籍概述</view>
				<view class="intro" v-html="dataObj.intro || '暂无概述'"></view>
			</view>
		</view>
		
		<!-- 微信小程序隐藏 -->
		<!-- #ifndef MP-WEIXIN -->
		<!-- 底部加入购物车 -->
		<footer-cart-buy
			:productId="dataObj.product_id"
			:price="dataObj.price || 0"
			:type="3">
		</footer-cart-buy>
		<!-- #endif -->
	</view>
</template>

<script>
	import footerCartBuy from '@/components/footer/footer-cart-buy.vue';
	import menuList from '@/components/common/menu-list.vue';
	import { requestErrorTip } from '@/common/tools.js';
	
	export default {
		components: {
			footerCartBuy,
			menuList
		},
		data() {
			return {
				dataObj: {
					id: '',
					image_url: '',
					name: '',
					brief: '',
					intro: '',
					price: '0.00',
					product_id: ''
				}
			}
		},
		onLoad(event) {
			this.dataObj['id'] = event['id'];
			this.getDetail(); // 获取详情数据
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket:true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus:["shareAppMessage","shareTimeline"]
			});
			// #endif
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getDetail();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 获取详情数据
			getDetail() {
				this.$Requset({
					url: this.$Api['books']['detail'],
					data: {
						id: this.dataObj['id'],
					},
					success: (res) => {
						const { data, status, msg } = res;
						if (!status) {
							requestErrorTip('toast', msg);
							return;
						}
						// 处理数据
						this.dataObj['image_url'] = data['image_url'];
						this.dataObj['name'] = data['name'];
						this.dataObj['brief'] = data['brief'];
						this.dataObj['intro'] = data['intro'];
						this.dataObj['price'] = data['price'];
						this.dataObj['product_id'] = data['product']['data']['id'];
					},
					fail: (err) => {
						console.log(err);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.detail-book {
		box-sizing: border-box;
		position: relative;
		// 头部模块
		.top {
			box-sizing: border-box;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 282rpx;
			padding-top: 60rpx;
			background-image: linear-gradient(#EFEFEF, #FFFFFF);
			.t-block {
				box-sizing: border-box;
				position: relative;
				width: 678rpx;
				height: 204rpx;
				margin: 0 auto;
				padding-left: 196rpx;
				background-color: #FFFFFF;
				border-radius: 18rpx;
				box-shadow: 0 0 15rpx rgba($color: #000000, $alpha: 0.1);
				.cover {
					position: absolute;
					top: -30rpx;
					left: 30rpx;
					width: 144rpx;
					height: 180rpx;
					background-color: #ddd;
					border-radius: 14rpx;
				}
				.title {
					box-sizing: border-box;
					height: 100rpx;
					line-height: 40rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #1A1A1A;
					padding: 20rpx 30rpx 0 0;
					margin-bottom: 10rpx;
				}
				.author {
					box-sizing: border-box;
					line-height: 40rpx;
					font-size: 22rpx;
					color: #7F7F7F;
				}
			}
		}
		.summary{
			padding-top: 282rpx;
			padding-bottom: 100rpx;
		}
		// 模块
		.block {
			background-color: #fff;
			margin-bottom: 18rpx;
			padding: 32rpx 36rpx;
			border-radius: 22rpx;
			// &:nth-last-child(1) {
			// 	border-bottom-left-radius: 0;
			// 	border-bottom-right-radius: 0;
			// }
			.header {
				line-height: 46rpx;
				font-size: 32rpx;
				color: #1A1A1A;
			}
			// 书籍简介内容
			.intro{
				line-height: 54rpx;
				font-size: 28rpx;
				color: #373737;
				padding-top: 12rpx;
			}
			.table{
				// height: 156rpx;
				background-color: #F7F7F7;
				border-radius: 10rpx;
				margin-top: 22rpx;
				.th{
					box-sizing: border-box;
					display: flex;
					height: 52rpx;
					border-bottom: 1rpx solid #EAEFF1;
					&:nth-last-child(1) {
						border-bottom: none;
					}
				}
				.td{
					box-sizing: border-box;
					flex: 1;
					line-height: 50rpx;
					font-size: 22rpx;
					color: #1A1A1A;
					text-align: center;
					border-right: 1rpx solid #EAEFF1;
					&:nth-last-child(1) {
						border-right: none;
					}
					.state{
						width: 32rpx;
						height: 32rpx;
						vertical-align: middle;
					}
				}
				.title{
					color: #7F7F7F;
				}
			}
		}
	}
</style>
